<template>
	<view class="app">
		<view v-if="orderInfo.state === 4">
			<view class="price-box">
				<text>주문/결제</text>
			</view>
		</view>
		<view v-else>
			<view class="price-box">
				<text>총결제금액</text>
				<text class="price">{{orderInfo.total | 1000}} 원</text>
				<!-- <text class="padding-top">{{$t('indent.lost_efficacy_time')}}</text> -->
        <text class="">주문최소기간</text>
				<uni-countdown color="#fa436a" splitorColor="#fa436a" :show-day="orderInfo.day ? true : false" :showColon="false" :day="orderInfo.day" :hour="orderInfo.hour" :minute="orderInfo.minute" :second="orderInfo.second"></uni-countdown>
			</view>
			
			<view class="pay-type-list">
			
				<view class="type-item b-b" @click="changePayType('creditcard')">
					<text class="icon yticon "><img src="/static/temp/creditcard_kr.png" class="krimg" alt="" srcset=""></text>
					<view class="con">
						<text class="tit">creditcard</text>
						<text>신용/체크카드</text>
					</view>
					<label class="radio">
						<radio value="" color="#fa436a" :checked="payType == 'creditcard'">
						</radio>
					</label>
				</view>
        <view class="type-item b-b" @click="changePayType('ebanking')">
					<text class="icon yticon "><img src="/static/temp/ebanking_kr.png" class="krimg" alt="" srcset=""></text>
					<view class="con">
						<text class="tit">ebanking</text>
						<text>무통장입금(가상계좌)</text>
					</view>
					<label class="radio">
						<radio value="" color="#fa436a" :checked="payType == 'ebanking'">
						</radio>
					</label>
				</view>
        <view class="type-item b-b" @click="changePayType('kakaopay')">
          <text class="icon yticon "><img src="/static/temp/kakaopay_kr.png" class="krimg" alt="" srcset=""></text>
					<view class="con">
						<text class="tit">kakaopay</text>
						<text> 카톡페이 결제</text>
					</view>
					<label class="radio">
						<radio value="" color="#fa436a" :checked="payType == 'kakaopay'">
						</radio>
					</label>
				</view>
        <view class="type-item b-b" @click="changePayType('samsungpay')">
          <text class="icon yticon krimg"><img src="/static/temp/payco_kr.png" class="krimg" alt="" srcset=""></text>
					<view class="con">
						<text class="tit">samsungpay</text>
						<text>삼성페이 결제</text>
					</view>
					<label class="radio">
						<radio value="" color="#fa436a" :checked="payType == 'samsungpay'">
						</radio>
					</label>
				</view>
				<!-- <view class="type-item b-b" @click="changePayType('alipay')">
					<text class="icon yticon icon-alipay"></text>
					<view class="con">
						<text class="tit">支付宝支付</text>
					</view>
					<label class="radio">
						<radio value="" color="#fa436a" :checked="payType == 'alipay'" />
						</radio>
					</label>
				</view> -->
				<!-- <view class="type-item" @click="changePayType(1)">
					<text class="icon yticon icon-erjiye-yucunkuan"></text>
					<view class="con">
						<text class="tit">{{$t('payment_log.prepaid_deposit')}}</text>
						<text>{{$t('payment_log.available_balance')}} {{$t('common.unit')}}{{orderInfo.user.money | 1000}}</text>
					</view>
					<label class="radio">
						<radio value="" color="#fa436a" :checked="payType == 1" >
						</radio>
					</label>
				</view> -->
			</view>
      <view class="pay-bottom-serive" style="">
  <svg t="1690975634237" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="18199" width="200" height="200">
    <path d="M771.2 375l-275 266.3c-1.9 2.9-3.8 5.8-6.7 7.7-7.7 7.7-18.2 11.5-28.7 11.5-10.6 0-21.1-3.8-29.7-11.5-1.9-1.9-4.8-4.8-5.8-7.7L277.7 498.6c-15.3-15.3-15.3-39.3 0-54.6 15.3-15.4 41.2-15.4 56.5 0l126.5 121.7 253.9-245.3c16.3-15.3 41.2-15.3 56.5 0 16.4 14.4 16.4 39.3 0.1 54.6z m147.6-227.1c-12.5-11.5-28.8-17.3-45-17.3H869c-1 0-11.5 1-27.8 1-27.8 0-80.5-1.9-131.3-14.4-65.2-15.3-140.9-87.1-163-101.5-10.5-6.7-24-10.5-36.4-10.5S485.6 9 474.1 15.7C471.3 17.6 392.7 99 316 117.2c-50.8 12.4-105.4 14.4-132.2 14.4-17.3 0-27.8-1-28.7-1h-3.8c-17.3 0-32.6 5.8-45 17.3-13.4 11.5-21.1 28.7-21.1 46v159c0 586.4 397.6 662.1 413.9 665 3.8 1 7.7 1 11.5 1s7.7 0 11.5-1c17.2-2.9 416.8-78.6 416.8-665v-159c0-17.3-7.7-34.5-20.1-46z" p-id="18200" fill="#26B514"></path>
  </svg>
  <view class="pay-securit">
    <p class="title">결제 보안</p>
    <p class="hint">결제 서비스 제공업체는 귀하의 결제 정보를 보호하기 위해 최선을 다하고 있으니 마음껏 이용해 주시기 바랍니다.</p>
    <p class="safety">안전 인증서</p>
    <view class="flex">
            <img class="pay-service-img" src="https://pic.compgoo.com/front/res/img/payment/pay-img1.png?_t=1741543175&amp;_s=52f1eb8881f8fedfffcef3246055c6fd&amp;_token=8963eb78f394f8fc3384d180be87f227&amp;_e=10&amp;_c=1e5983aac53360ee94a5b23ad8f5c91c" alt="">
            <img class="pay-service-img" src="https://pic.compgoo.com/front/res/img/payment/pay-img2.png?_t=1741543175&amp;_s=a5b5a4b40bd2e35343d7bf9991377b32&amp;_token=8963eb78f394f8fc3384d180be87f227&amp;_e=10&amp;_c=0624890448bc106258921360cd14bf00" alt="">
      <img class="pay-service-img" src="https://pic.compgoo.com/front/res/img/payment/pay-img3.png?_t=1741543175&amp;_s=3ac60019259a8261073728bd278193bd&amp;_token=8963eb78f394f8fc3384d180be87f227&amp;_e=10&amp;_c=47120f73b1bc22f4c0587295f4260541" alt="">
      <img class="pay-service-img" src="https://pic.compgoo.com/front/res/img/payment/pay-img4.png?_t=1741543175&amp;_s=3762e526aac561ff80dc7e3ebed61402&amp;_token=8963eb78f394f8fc3384d180be87f227&amp;_e=10&amp;_c=2c3d242ac7910ad299e3a57aa48534b3" alt="">
      <img class="pay-service-img" src="https://pic.compgoo.com/front/res/img/payment/pay-img5.png?_t=1741543175&amp;_s=9a5e673d0d8681ce5e3bc417387c507c&amp;_token=8963eb78f394f8fc3384d180be87f227&amp;_e=10&amp;_c=dfcc89f1109b248b185798191d77131b" alt="">
      <img class="pay-service-img" src="https://pic.compgoo.com/front/res/img/payment/pay-img6.png?_t=1741543175&amp;_s=23aee0b2436a862ded36f9df43cebaaf&amp;_token=8963eb78f394f8fc3384d180be87f227&amp;_e=10&amp;_c=eed908cf50ae4b248a7402c90e8f4394" alt="">
      <img class="pay-service-img" src="https://pic.compgoo.com/front/res/img/payment/pay-img7.png?_t=1741543175&amp;_s=a53cc6dd1c53fdaf792456cac0a4059b&amp;_token=8963eb78f394f8fc3384d180be87f227&amp;_e=10&amp;_c=fa779b6f78cb694b7bdbf150c1beb19b" alt="">
    </view>
  </view>
</view>
<view class="pay-bottom-serive" style="">
  <svg t="1690975912988" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="22415" width="200" height="200">
    <path d="M912.9 130.6c-26.1 4.5-52.8 6.9-80.2 6.9-115.4 0-221.1-41.9-302.6-111.2-10.6-9-26.2-9-36.8 0-81.5 69.4-187.2 111.2-302.6 111.2-27 0-53.5-2.3-79.2-6.7-17.2-2.9-32.9 10.4-33 27.9-0.2 109.1-0.4 238.1-0.4 242.5 0 471 394.5 592.7 431 603 1.8 0.5 3.6 0.5 5.4 0C550.9 994 943 873 945.5 405.7l0.4-247c0-17.6-15.8-31.1-33-28.1zM546 568.9v154.5c0 18.8-15.2 34-34 34s-34-15.2-34-34V568.9c-68.2-15.5-119.1-76.4-119.1-149.3 0-84.5 68.5-153.1 153.1-153.1S665.1 335 665.1 419.6c0 72.9-50.9 133.9-119.1 149.3z" fill="#26B514" p-id="22416"></path>
  </svg>
  <view class="pay-privacy">
    <p class="title">개인 정보 보호</p>
    <p class="hint">당사 웹사이트 사용자 및 방문자의 개인정보를 존중하며 귀하의 개인정보를 무단 사용, 처리 및 공개로부터 보호합니다.</p>
  </view>
</view>
			
			<button class="mix-btn" :loading="confirmDisabled" :disabled="confirmDisabled" @click="confirm">구매하기</button>
			<view class="padding-top">
				
			</view>
			<view class="cu-modal" :class="modalName=='payHint'?'show':''">
				<view class="cu-dialog">
					<view class="cu-bar bg-white justify-end">
						<view class="content">{{$t('payment_log.remind')}}</view>
						<view class="action" @tap="hideModal">
							<text class="cuIcon-close text-red"></text>
						</view>
					</view>
					<view class="padding-xl">
						{{$t('payment_log.is_accomplish')}}
					</view>
					<view class="flex cu-bar bg-white justify-between">
						<button class="margin-left cu-btn line-green text-green" @tap="goBack">{{$t('common.cancel')}}</button>
						<button class="margin-right cu-btn bg-green margin-left" @tap="goBack">{{$t('good_indent.state.accomplish')}}</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import GoodIndent from '../../api/goodIndent'
	import Pay from '../../api/pay'
	import User from '../../api/user';
	import { micromessenger } from 'utils'
	import {
	  authMsg
	} from '../../utils'
	import {
	    mapMutations  
	} from 'vuex';
	export default {
		data() {
			return {
				confirmDisabled: false,
				id: '',
				payType: 'creditcard',
				orderInfo: {
					total: 0,
					user: {
						money: 0
					}
				},
				index:0,
				jweixin:null,
				modalName: null,
				jweixin:null,
				user: {},
				paySuccess: `/pages/money/paySuccess`
			};
		},
		computed: {
		
		},
		onLoad(options) {
			if(!options.id){
				this.$api.msg(this.$t('common.arguments'))
				return false
			}
			this.id = options.id
			// #ifdef H5
			if(micromessenger()){
				this.getWeixin()
			}
			// #endif
		},
		onShow(){
			uni.setNavigationBarTitle({
				title: this.$t('money.pay.title')
			})
			// this.loginCheck()
			this.getList()
			this.getUser()
		},
		methods: {
			...mapMutations(['loginCheck']),
			getUser(){
				const that = this
				User.detail(function(res){
					that.user = res
				})
			},
			getList(){
				const that = this
				GoodIndent.pay(this.id,function(res){
					that.orderInfo = res
					if(res.state !== 1 && res.state !== 4){
						uni.redirectTo({
							url: that.paySuccess
						})
					}
				})
			},
			//选择支付方式
			changePayType(type) {
				this.payType = type;
			},
			showModal(e) {
				this.modalName = e
			},
			hideModal(e) {
				this.modalName = null
			},
			goBack(){
				this.hideModal()
				this.getList()
			},
			getWeixin(){
				this.jweixin = require('jweixin-module')
				const that = this
				JsSdk.buildConfig(function(res){
					that.jweixin.config(res)
					that.jweixin.error(function(res){
					  console.log('失败')
					})
				})
			},
			//确认支付
			confirm: async function() {
				const that = this
				this.confirmDisabled = true
				if(this.payType === 1) {
					Pay.balancePay({
						id: this.id
					},function(res){
						authMsg(['4iOC-HyjJeKK5HiYORcOtrKHvu2Ho1ScVF0aqP3KkzQ'])
						if(!that.user.email && !that.user.wechat){
							uni.showModal({
							  title: that.$t('common.hint'),
							  content: that.$t('payment_log.notification_enabled'),
							  success (res) {
								if (res.confirm) {
								  uni.redirectTo({
									url: '/pages/set/message'
								  })
								} else if (res.cancel) {
								  uni.redirectTo({
									url: that.paySuccess
								  })
								}
							  }
							})
						}else{
							uni.redirectTo({
								url: that.paySuccess
							})
						}
					})
					that.confirmDisabled = false
				} else {
					// #ifdef H5
					if(micromessenger()){
						Pay.unifiedPayment({
							platform: this.payType,
							type: 'goodsIndent',
							trade_type: 'JSAPI',
							id: this.id,
						},function(res){
							that.jweixin.chooseWXPay({
							  appId:res.msg.appId,
							  timestamp: res.msg.timestamp,
							  nonceStr: res.msg.nonceStr,
							  package: res.msg.package,
							  signType: res.msg.signType,
							  paySign: res.msg.paySign,
							  success: function (res) {
								uni.redirectTo({
									url: that.paySuccess
								})
							  },
								fail(res) {
									that.$api.msg(that.$t('payment_log.payment_failure'))
									that.confirmDisabled = false
								}
							})
						},function(error){
							that.$api.msg(error.message)
							that.confirmDisabled = false
						})
					} else {
            //H5
						Pay.unifiedPayment({
							platform: 'payssion',
							type: 'goodsIndent',
							trade_type: this.payType,
							id: this.id,
              order_detail: `https://wap.lqqu.com/#/pages/money/paySuccess`
						},function(res){
							that.confirmDisabled = false
							// that.showModal('payHint')
							window.location.href = res.redirect_url
						},function(error){
							that.$api.msg(error.message)
							that.confirmDisabled = false
						})
           
       
					}
					// #endif
					// #ifdef MP
					Pay.unifiedPayment({
						id: this.id,
						platform: this.payType,
						trade_type: 'JSAPI',
						type: 'goodsIndent'
					},function(res){
						uni.requestPayment({
							timeStamp: res.msg.timestamp,
							nonceStr: res.msg.nonceStr,
							package: res.msg.package,
							signType: res.msg.signType,
							paySign: res.msg.paySign,
							success(res) {
							  // console.log(res)
							  // 订阅消息
							  authMsg(['4iOC-HyjJeKK5HiYORcOtrKHvu2Ho1ScVF0aqP3KkzQ'])
							  if(!that.user.email && !that.user.wechat){
							  	uni.showModal({
							  	  title: that.$t('common.hint'),
							  	  content: that.$t('payment_log.notification_enabled'),
							  	  success (res) {
							  	    if (res.confirm) {
							  	      uni.redirectTo({
							  	      	url: '/pages/set/message'
							  	      })
							  	    } else if (res.cancel) {
							  	      uni.redirectTo({
							  	      	url: that.paySuccess
							  	      })
							  	    }
							  	  }
							  	})
							  }else{
							  	uni.redirectTo({
							  		url: that.paySuccess
							  	})
							  }
							},
							fail(res) {
								that.$api.msg(that.$t('payment_log.payment_failure'))
								that.getList()
							}
						})
						
					},function(error){
						that.$api.msg(error.message)
						that.confirmDisabled = false
					})
					// #endif
				}
			},
		}
	}
</script>

<style lang='scss'>
	.app {
		width: 100%;
	}

	.price-box {
		background-color: #fff;
		/* height: 230upx; */
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 28upx;
		color: #909399;

		.price{
			font-size: 50upx;
			color: #303133;
			margin-top: 8upx;
			margin-bottom: 8upx;
			&:before{
				font-size: 40upx;
			}
		}
	}

	.pay-type-list {
		margin-top: 10upx;
		background-color: #fff;
		padding-left: 60upx;
		
		.type-item{
			/* height: 120upx; */
			padding: 10upx 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-right: 60upx;
			font-size: 30upx;
			position:relative;
		}
		
		.icon{
			width: 200upx;
			font-size: 52upx;
		}
		.icon-erjiye-yucunkuan {
			color: #fe8e2e;
		}
		.icon-weixinzhifu {
			color: #36cb59;
		}
		.icon-alipay {
			color: #01aaef;
		}
		.tit{
			font-size: $font-lg;
			color: $font-color-dark;
			margin-bottom: 4upx;
		}
		.con{
			flex: 1;
			display: flex;
			flex-direction: column;
			font-size: $font-sm;
			color: $font-color-light;
		}
	}
	.mix-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 630upx;
		height: 80upx;
		margin: 20upx auto 30upx;
		font-size: $font-lg;
		color: #fff;
		background-color: $base-color;
		border-radius: 10upx;
		box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
	}

  .krimg{
    width: 120upx;
  }


  .pay-bottom-serive {
    display: flex;
    align-items: flex-start;
    padding:8px 15px;
    background: #fff;
    margin-top: 5px;
}

.pay-bottom-serive>svg {
    width: 30px;
    height: 30px;
    margin-right: 3px;
    margin-top: -6px;
}

.pay-bottom-serive>div {
    flex: 1
}

.pay-bottom-serive .hint,.pay-bottom-serive .title {
    font-size: 14px;
    line-height: 17px;
    margin-bottom: 8px;
    font-weight: 700
}

.pay-bottom-serive .safety {
    font-size: 12px;
    line-height: 17px;
    margin-bottom: 4px
}

.pay-bottom-serive .hint {
    color: #999;
    font-weight: 400;
    text-align: left
}

.pay-bottom-serive .flex {
    display: flex;
    align-items: center;
    justify-content: start;
    flex-wrap: wrap
}

.pay-bottom-serive .flex img {
    height: 35px;
    width: auto;
    margin: 8px 8px 0 0;
    max-width: 100%
}


</style>
